<script setup lang="ts">
import { computed, type StyleValue } from 'vue'

const props = defineProps({
  images: Array<string>,
  width: {
    type: Number,
    default: 300,
  },
})

const imageSize = computed<StyleValue>(() => {
  return {
    width: `${props.width}px`,
    height: `${props.width * 0.56}px`,
  }
})

const fullImages = computed<Array<string>>(() => {
  let arr = []
  if (props.images.length < 5 && props.images.length > 0) {
    for (let i = 0; i < 5 - props.images.length; i++) {
      arr.push(props.images[i % props.images.length])
    }
  }
  return arr
})

</script>

<template>
  <div
    class="ppt-cover-image"
    :style="imageSize"
  >
    <div
      class="flex justify-content-center align-items-center pw-100"
      v-if="images.length === 0"
    >
      <el-icon
        style="font-size: 40px; color: #FFF"
      >
        <component is="Picture" />
      </el-icon>
    </div>
    <template v-for="(image, i) in images">
      <el-image
        class="cover-item"
        :src="image"
        v-if="i < 5"
      />
    </template>
    <el-image
      v-for="image in fullImages"
      class="cover-item"
      :src="image"
    />

  </div>
</template>

<style scoped lang="scss">
.ppt-cover-image {
  display: flex;
  position: relative;
  justify-content: space-between;
  align-content: space-between;
  flex-wrap: wrap;

  .cover-item {
    width: 49%;
    height: 49%;

    &:first-child {
      border: 1px solid rgba(0, 0, 0, 0.3);
      position: absolute;
      z-index: 1;
      width: calc(100% * 0.7);
      height: calc(100% * 0.7);
      left: calc(100% * 0.3 / 2);
      top: calc(100% * 0.3 / 2);
      box-shadow: 0 0 20px rgba(0, 0, 0, 0.58);
    }
  }

  &::after {
    content: '';
    display: block;
    width: 100%;
    height: 100%;
    background: transparent;
    position: absolute;
    left: 0;
    top: 0;
    z-index: 2;
  }
}
</style>